<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="slot-example">
			<div>
				<!-- 这样是访问不到 user.firstName -->
				<!-- <current-user >{{user.firstName}}</current-user> -->
				
				<!--  <slot v-bind:user="user">{{user.lastName}}</slot> -->
				<!-- slot 标签绑定user 就可以在组件内访问啦 需要如下访问 借助template -->
				<current-user >
					<template v-slot:default="slotProps">
						{{slotProps.user.firstName}}
					</template>
				</current-user>
				
				<!--第二种取值 -->
				<current-user v-slot:default="slotProps">
					{{slotProps.user.firstName}}
				</current-user>
				<!-- 第三种取值 -->
				<current-user v-slot="slotProps">
				  {{ slotProps.user.firstName }}
				</current-user>
				
				<!-- 解构插槽
				 作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：
				 
				 function (slotProps) {
				   // 插槽内容
				 }
				 
				 作用域插槽
				 		有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：
				 
				 这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，
				 你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
				 -->
				
				<!-- 第4种取值 -->
				<current-user v-slot="{user}">
					{{user.firstName}}
				</current-user>
				<!--
				 这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：
				 -->
				 <!-- user 重命名person -->
				 <current-user v-slot="{user:person}">
					 {{person.firstName}}
				 </current-user>
				 
				 <!-- 你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：
				 user2 未定义的情况
				 -->
				<current-user v-slot="{ user2 = { firstName2: 'Guest' } }">
				  {{ user2.firstName2 }}
				</current-user>

			</div>
		</div>	
		<!--
		插槽 slot
		slot的后备内容
		
		具名插槽
		有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：

		 -->
		<script type="text/javascript">
			<!-- 组件里面定义的data数据，可以在 template模板里面使用 -->
			Vue.component('current-user',{
				data:function(){
						return {
							user:{
								lastName:'zhangsan',firstName:'lisi',
							}
						}
					}
				,
				template:`
				<span>
					<slot v-bind:user="user">{{user.lastName}}</slot>
				</span>
				`
			})
			
			let app=new Vue({
				el:'#slot-example',
				data:{
				},
				
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
